<template>
  <div>
    <Header></Header>
    <div class="mblog">
      <h1>{{blog.title}}</h1>
      <!-- <el-link icon="el-icon-edit" v-if="blog.ownBlog">
          <router-link :to="{name:'BlogEdit',params:{blogid:blog.id}}">
              编辑
          </router-link>
      </el-link> -->
      <el-divider></el-divider>
      <div class="markdown-body" v-html="blog.content"></div>
    </div>
  </div>
</template>
<script>
import Header from "../components/Header.vue";
import "github-markdown-css/github-markdown.css";
export default {
  name: "blogDetail",
  components: { Header },
  data() {
    return {
      blog: {
        id: "",
        title: "",
        content: "",
        ownBlog:false
      },
    };
  },
  created() {
      this.getBlogDetail();
  },
  methods: {
    getBlogDetail() {
      var vm = this;
      var blogId = vm.$route.params.blogid;
      if (blogId) {
        vm.$axios({
          method: "get",
          url: "/blog/detail/" + blogId,
        }).then((res) => {
          const resblog = res.data.data;
          vm.blog.id = resblog.id;
          vm.blog.title = resblog.title;
          //对内容进行html渲染
          var MarkDownIt = require("markdown-it");
          var md = new MarkDownIt();
          var result = md.render(resblog.content);
          vm.blog.content = result;
          //设置编辑按钮的显示权限
          vm.blog.ownBlog = (resblog.userId == this.$store.getters.getUser.id)
        });
      }
    },
  },
};
</script>
<style scoped>
.mblog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 700px;
}
.mblog h1{
    text-align: center;
    padding-top: 10px;
}
.mbutton{
    text-align: right;
}
</style>